<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 1100px;
            height: 600px;
            margin: 50px auto;
            border: 1px solid #333;
            position: relative;
        }

        .ball {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border-radius: 50%;
            position: absolute;
            left: 0;

            /* animation: run 3s; */
            animation-name: run;
            animation-duration: 1s;
            animation-delay: 0s;
            animation-timing-function: ease-in;

            /* 运动的次数 */
            /* animation-iteration-count: 3; */
            /* animation-iteration-count: infinite; */

            /* animation-fill-mode: 运动完毕之后所在位置
                   backwards  初始位置
                   forwards   结束位置
            */
            /* animation-fill-mode: backwards; */
            /* animation-fill-mode: forwards; */

            /*   animation-direction  运动的方向
                    normal   从from到to
                    reverse   从to到from(翻转)
                    alternate  交替(先从from到to,再从to到from)
                    alternate  交替(先从to到from,再从from到to)
            */
            /* animation-direction: normal;
            animation-direction: reverse;
            animation-direction: alternate;
            animation-direction: alternate-reverse; */

            /* 复合属性 */
            /* animation: run 5s 0s ease-in 1 alternate forwards; */
            animation: run 5s 0s steps(100) 1 alternate forwards;

        }

        /*  @font-face {
             font-family: ;
             src: url();
         }
         @media screen {
             
         } */
        /* 定义动画(css3 动画) =>可以对应动画名称复用 */

        /* 简单动画 */
        /* @keyframes run {

            起始位置
            from {
                left: 0;
            }

            终止位置
            to {
                left: 1000px;
            }
        } */

        /* 逐帧动画 */
        /* @keyframes run {
            0% {
                left: 0;
                top: 0
            }


            100% {
                left: 1000px;
                top: 500px;
            }
        } */

        @keyframes run {
            0% {
                left: 0;
                top: 0;
                /* transform: scale(0); */
            }

            25% {
                left: 1000px;
                top: 0;
                /* transform: scale(1.2); */
            }

            50% {
                left: 1000px;
                top: 500px;
                /* transform: scale(0); */
            }

            75% {
                left: 0px;
                top: 500px;
                transform: scale(1.2);
            }

            100% {
                left: 0px;
                top: 100px;
                /* transform: scale(0); */
            }
        }
    </style>
</head>

<body>
    <!-- 
        transition和animation的区别
        (1) transition 需要一些触发手段(鼠标移入,鼠标按下), animation页面加载完毕自动执行
        (2) transition只能实现一些简单的过渡效果, animation除了可以实现简单过渡效果外,也可以做逐帧动画

     -->

    <div class="wrap">
        <div class="ball"></div>
    </div>
</body>
<script>


</script>

</html>